<template>
  <div class="box">
    <Header/>

    <div class="content">
      <div class="search">
        <el-input v-model="search" style="width:600px;height:50px" placeholder="搜索任务"
                  prefix-icon="el-icon-search"></el-input>
        <div class="btn">
          <img
            src="../../assets/search.png"
            alt
            style="width:90px;height:35px; cursor: pointer;margin-right:10px"
            @click="searchF"
          />
          <img
            src="../../assets/money.png"
            alt
            style="width:90px;height:35px; cursor: pointer;"
            @click="goToTask"
          />
        </div>
      </div>

      <div class="info">
        <LeftSidebar/> <!-- 引用左侧导航组件 -->

        <div class="searchInfo">
          <div class="tile">任务列表:</div>
          <div class="card">
            <ul>
              <li v-for="task in taskList" :key="task.id" class="task-item"
                  @click="goToTaskDetail(task.id,task.cUrl,task.userId)">
                <div class="task-card">
                  <div class="task-header">
                    <span class="task-url">{{ task.cUrl }}</span>
                  </div>
                  <div class="task-body">
                    <div>奖励金额: <strong>{{ task.rewardAmount }}</strong></div>
                    <!--                    <div>热度: <strong>{{ task.heat }}</strong></div>-->

                    <!--                    <el-icon-->
                    <!--                        class="heat-icon"-->
                    <!--                        @click.stop="increaseHeat(task)"-->
                    <!--                        style="cursor: pointer; color: #FF5722;">-->
                    <!--                      <i class="el-icon-fire"></i>-->
                    <!--                    </el-icon>-->
                    <strong @click.stop="increaseHeat(task)">热度 🔥 {{ task.heat }}</strong>
                    <div>状态: <strong>{{ task.claimStatus === 1 ? '已认领' : '待认领' }}</strong></div>
                  </div>
                </div>
              </li>
            </ul>
            <div v-if="loading" class="loading">加载中...</div>
            <div v-if="taskList.length === 0" class="empty-state">没有找到任务</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {TaskApi} from "../../api/task.ts";
import {onMounted, ref} from 'vue';
import LeftSidebar from "../components/LeftSidebar.vue";
import {Task} from "../../types/entity.ts";
import router from "../../router";
import Header from "../components/header.vue";

let search = ref("");
let taskList = ref<Task[]>([]);
let loading = ref(false);

const fetchTasks = async () => {
  loading.value = true;
  try {
    const response = await TaskApi.taskList();
    taskList.value = response.data;
  } catch (error) {
    console.error('获取任务列表失败:', error);
  } finally {
    loading.value = false;
  }
};

const increaseHeat = async (task: Task) => {

  const response = await TaskApi.heat(task.id);
  if (response.meta.code == 2000) {
    task.heat += 1;
  }
  // 示例：热度加一，模拟本地操作
  // task.heat += 1;

  // 示例：可以通过 API 调用更新服务端热度
  console.log(`点击火苗图标，任务ID: ${task.id}, 当前热度: ${task.heat}`);
};

const goToTaskDetail = (id: number, cUrl: string, userId) => {
  router.push({name: 'TaskDetailList', query: {id: id, cUrl: cUrl, userId: userId}});
};

const searchF = async () => {
  // let res = await userApi.search(search.value)
  // if (res.meta.code == 2000) {
  // flag.value = true
  // resList.value = res.data
  // }
  // console.log(res, 'eeeeee')
}
const goToTask = () => {
  router.push({name: 'task'})
}

onMounted(() => {
  fetchTasks();
});
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;

  .content {
    width: 80%;
    min-width: 1200px;
    margin: 0 auto;
    padding: 20px;

    .search {
      width: 800px;
      margin: 0 auto;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      margin-bottom: 20px;
    }

    .info {
      width: 100%;
      min-height: 600px;
      background: #f9f9f9;
      border-radius: 8px;
      // padding: 20px;
      display: flex;
      justify-content: space-between;
      .list {
        width: 15%;
        min-height: 600px;
        background: #e5f2f5;
        border-radius: 20px;
        padding: 20px;
        ul {
          padding: 0;
          background: #a5c9ed;
          min-height: 500px;
          border-radius: 10px;
          li {
            list-style: none;
            line-height: 30px;
            padding: 0 20px;
          }
        }
      }
      .searchInfo {
        width: 80%;
        min-height: 600px;
        padding: 20px;
        .tile {
          font-size: 24px;
          margin-bottom: 20px;
          font-weight: bold;
        }

        .card {
          background: #fff;
          border-radius: 8px;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          padding: 20px;

          ul {
            padding: 0;
            list-style: none;
            margin: 0;
          }

          .task-item {
            padding: 15px;
            margin-bottom: 20px;
            background: #f0f0f0;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;

            &:hover {
              background-color: #e8e8e8;
            }
          }

          .task-card {
            .task-header {
              font-size: 18px;
              font-weight: bold;
              color: #007bff;
              margin-bottom: 10px;
            }

            .task-body {
              font-size: 14px;
              color: #333;

              div {
                margin: 5px 0;
              }

              strong {
                font-weight: bold;
              }
            }
          }
        }

        .empty-state {
          text-align: center;
          font-size: 18px;
          color: #aaa;
        }

        .loading {
          text-align: center;
          font-size: 18px;
          color: #007bff;
        }
      }
    }
  }
}
</style>
